import React,{useState} from "react";
import {Avatar,Divider,Row,Col} from 'antd';
import { UserOutlined,GithubOutlined,WechatOutlined } from '@ant-design/icons';
import resumeCardStyle from './ResumeCard.module.css';

import { userInfo } from "../../config/appConfig";

export default function ResumeCard() {

    const [config,setConfig] = useState({
        avatarUrl:userInfo.avatar_url,
        title:'火锅国大侠',
        text:'want tobe a high level frontender，让我们共同努力'
    }); // 

    const links = [
        <GithubOutlined style={{color:'black',fontSize:26}}/>,
        <div>{'gitee'}</div>,
        <WechatOutlined style={{color:'green',fontSize:26}}/>,
        <div>{'掘金'}</div>,

    ]

    return (

        <>
            <div className={resumeCardStyle.resume}>
                <div className={resumeCardStyle.resume_avatar}>
                    <div className={resumeCardStyle.resume_avatar__container}>
                        <Avatar 
                                    size={100}
                                    alt="avatar"
                                    
                                    src={config.avatarUrl}
                                    

                                />
                    </div>
                </div>
                <div className={resumeCardStyle.resume_title}>
                    {config.title}
                </div>
                <div className={resumeCardStyle.resume_text}>
                    {config.text}
                </div>
                <Divider>联系方式</Divider>
                <div className={resumeCardStyle.resume_link}>

                    
                    {links.map( (item,key) =>　<Avatar key={key} style={{backgroundColor:'white'}} size={{}} icon={item} />) }
                </div>
                
            </div>
        </>
    )
}